<template>
    <div class="main">
      <p  class="main_text">协议管理</p>
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <el-form :model="searchData" class="df aic fww">
                <el-form-item label="协议名称：" class="mr20">
                    <el-input v-model="searchData.agreementName" style="width: 7.5rem;" />
                </el-form-item>
                <el-form-item label="使用位置：" class="mr20">
                    <el-select v-model="searchData.useLocation" placeholder="使用位置：" style="width: 7.5rem;">
                        <el-option v-for="(item, index) in agreementTypeList" :key="index" :label="item"
                            :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：" class="mr20">
                    <el-select v-model="searchData.status" placeholder="状态：" style="width: 7.5rem;">
                        <el-option label="废弃" value="false" />
                        <el-option label="启用" value="true" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class='df'>
                        <el-button type="primary" @click="searchBtn">查询</el-button>
                        <el-button type="primary" plain @click="resetBtn">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>

        </div>
        <!-- ############################################## 表单 ############################################## -->
        <div class="cyr-flex">
            <div class="mb20">
                <el-button type="primary" @click="centerDialogVisible = true">添加协议</el-button>
            </div>
          <div class="cyr-flex-box">
            <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%"
                 :header-cell-style="{ 'background': '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column type="selection" width="50" />
                <el-table-column label="序号" prop="id" />
                <el-table-column label="协议名" prop="agreementName" />
                <el-table-column label="上传时间" prop="createdAt" />
                <el-table-column label="使用位置" prop="useLocation" />
                <el-table-column label="状态">
                    <template #default="props">
                        <el-tag v-if="props.row.status == true" type="success">启用</el-tag>
                        <el-tag v-else type="info">废除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180" :show-overflow-tooltip="false">
                    <template #default="props">
                        <el-button v-if="props.row.status == true" size="small" link type="success"
                            @click="editFormBtn(props.row)">更新</el-button>
                        <el-button v-if="props.row.status == false" size="small" link type="primary"
                            @click="editFormBtn(props.row)">查看</el-button>
                        <el-button size="small" link type="primary" @click="downloadFile(props.row)">下载协议</el-button>
                        <el-button v-if="props.row.status == true" size="small" link type="danger"
                            @click="abrogateBtn(props.row)">废除</el-button>
                        <!-- <el-button size="small" link type="danger" @click="delFormBtn(props.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
                @change="handleCurrentChange" />
          </div>
        </div>
        <!-- ############################################## 蒙层 ############################################## -->
        <!-- ****************************** 添加协议 ****************************** -->
        <el-dialog v-model="centerDialogVisible" title="添加协议" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">添加协议</p>
                </div>
            </template>
            <div class="df fdc aic">
                <el-form :model="addFormData" label-width="7.5rem">
                    <el-form-item label="协议名：" style="width: 100%;">
                        <el-input v-model="addFormData.agreementName" />
                    </el-form-item>
                    <el-form-item label="使用位置：" style="width: 100%;">
                        <el-select v-model="addFormData.useLocation" placeholder="选择使用位置" filterable allow-create
                            default-first-option :reserve-keyword="true">
                            <el-option v-for="(item, index) in agreementTypeList" :key="index" :label="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="协议文件：" style="width: 100%;">
                        <el-upload v-model:file-list="uploadRef1" class="upload-demo" action="#" :auto-upload="false"
                            :on-change="fileUpload">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddFormDataBtn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 废除协议 ****************************** -->
        <el-dialog v-model="FccenterDialogVisible" title="废除协议" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">废除协议</p>
                </div>
            </template>
            <div class="df fdc aic">
                <el-form :model="abrFormData" label-width="7.5rem">
                    <el-form-item label="协议名：" style="width: 100%;">
                        <el-input v-model="abrFormData.agreementName" placeholder="协议名" disabled />
                    </el-form-item>
                    <el-form-item label="使用位置：" style="width: 100%;">
                        <el-select v-model="abrFormData.useLocation" placeholder="选择使用位置" disabled>
                            <el-option v-for="(item, index) in agreementTypeList" :key="index" :label="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="废除原因：" style="width: 100%;">
                        <el-input v-model="abrFormData.failureReason" placeholder="废除原因" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="abrFormDataBtn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 修改协议 ****************************** -->
        <el-dialog v-model="editCenterDialogVisible" title="修改协议" width="40%" align-center>
            <template #header>
                <div class="df aic">
                    <el-icon style="color: #fff;" size="20">
                        <Edit />
                    </el-icon>&nbsp;
                    <p style="color: #fff;">修改协议</p>
                </div>
            </template>
            <div class="df fdc aic">
                <el-form :model="editFormData" label-width="7.5rem">
                    <el-form-item label="协议名：" style="width: 100%;">
                        <el-input v-model="editFormData.agreementName" placeholder="协议名" />
                    </el-form-item>
                    <el-form-item label="使用位置：" style="width: 100%;">
                        <el-select v-model="editFormData.useLocation" placeholder="选择使用位置">
                            <el-option v-for="(item, index) in agreementTypeList" :key="index" :label="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="协议文件：" style="width: 100%;">
                        <el-upload class="upload-demo" action="#" :auto-upload="false" v-model:file-list="uploadRef1"
                            :on-change="fileUpload">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editCenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSaveBtn">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { RequestAgreementUploadAgreement, RequestAgreementGetlistlimit, RequestAgreementAgreementFailure, RequestAgreementGetAgreementType } from "@/api/path/index.js";
import { ElMessage } from 'element-plus'
import { formatTime } from '@/filters/index'
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue';
const searchData = ref<any>({
    agreementName: '',
    useLocation: '',
    status: '',
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const centerDialogVisible = ref<any>(false)
const FccenterDialogVisible = ref<any>(false)
const editCenterDialogVisible = ref<any>(false)
/* *********************************** 分页获取数据 *********************************** */
const total = ref<any>(0)
const currentPage = ref<any>(1)
const pageSize = ref<any>(10)
const handleSizeChange = (val: number) => {
    getData()
}
const handleCurrentChange = (val: number) => {
    getData()
}
const tableData = ref<any>([])                     //全部
const agreementTypeList = ref<any>([])
const getAgreementTypeList = () => {
    RequestAgreementGetAgreementType().then((res: any) => {
        agreementTypeList.value = res.resultObj
        console.log(agreementTypeList.value);
    })
}
getAgreementTypeList()
const getData = () => {
    RequestAgreementGetlistlimit({
        page: currentPage.value,
        rows: pageSize.value,
        name: searchData.value.agreementName,
        type: searchData.value.useLocation,
        status: searchData.value.status,
    }).then((res: any) => {
        res.resultObj.data.forEach((item: any) => {
            item.createdAt = formatTime(item.createdAt)
        });
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
}
getData()
const searchBtn = () => {
    getData()
}
/* *********************************** 添加 *********************************** */
/* 文件上传 */
const uploadRef1 = ref<any>([])
const fileUpload = (file: any) => {
    console.log('添加11111111111111111fff', uploadRef1.value.length);
    // console.log(file);
    uploadRef1.value[uploadRef1.value.length] = file
    console.log('添加111111111111111112222', uploadRef1.value);
    // uploadRef1.value.push(file)
}
const addFormData = ref<any>({
    agreementName: '',
    useLocation: ''
})
const AddFormDataBtn = () => {
    const blob = new Blob(
        [
            JSON.stringify(addFormData.value),
        ],
        {
            type: 'application/json;charset=utf-8',
        }
    )
    let addData = new FormData()
    uploadRef1.value.forEach((item: any) => {
        addData.append('file', item.raw)
    });
    addData.append('agreement', blob)
    RequestAgreementUploadAgreement(addData).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
            centerDialogVisible.value = false
            addFormData.value.adress = ''
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* *********************************** 下载协议 *********************************** */
const downloadFile = (row: any) => {
    location.href = row.location
}
/* *********************************** 更新 *********************************** */
const editFormData = ref<any>({
    address: ''
})
const editFormBtn = (row: any) => {
    editFormData.value = row
    console.log(editFormData.value);
    editCenterDialogVisible.value = true
}
const editSaveBtn = () => {
    const blob = new Blob(
        [
            JSON.stringify({
                agreementName: editFormData.value.agreementName,
                content: editFormData.value.content,
                failureReason: editFormData.value.failureReason,
                id: editFormData.value.id,
                useLocation: editFormData.value.useLocation,
            }),
        ],
        {
            type: 'application/json;charset=utf-8',
        }
    )
    let addData = new FormData()
    uploadRef1.value.forEach((item: any) => {
        addData.append('file', item.raw)
    });
    addData.append('agreement', blob)
    RequestAgreementUploadAgreement(addData).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            //其它处理代码
            getData()
            editCenterDialogVisible.value = false
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* *********************************** 重置 *********************************** */
const resetBtn = () => {
    searchData.value = []
    getData()
}
/* *********************************** 废除 *********************************** */
const abrFormData = ref<any>({
    useLocation: '',
    agreementName: ''
})
const abrogateBtn = (row: any) => {
    row.status = false
    abrFormData.value = row
    FccenterDialogVisible.value = true
}
const abrFormDataBtn = () => {
    if (abrFormData.value.failureReason != null) {
        delete abrFormData.value.createdAt
        RequestAgreementAgreementFailure(abrFormData.value).then((res: any) => {
            FccenterDialogVisible.value = false
            getData()
        })
    } else {
        ElMessage.error('请填写废除原因')
    }
}
/* *********************************** 批量删除 *********************************** */
// const delFormBtn = (row: any) => {
//     let idsForm = new FormData()
//     idsForm.append('ids', row.id)
//     RequestAgreementDeleteList(idsForm).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             //其它处理代码
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
//     console.log(row.id);
// }
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }

    .el-form {
        .el-icon svg {
            color: #dcdfe6;
        }

    }
}
</style>
